<template>
    <div>
        <el-container>
            <el-header class="font">哈哈车位管理系统</el-header>
            <el-main>
                <el-row type="flex" justify="center">
                    <!-- justify 对齐方式 -->
                    <el-col :span="6">
                        <div class="grid-content"></div>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <!-- justify 对齐方式 -->
                    <el-col :span="4">
                        <el-card shadow="always">
                            <h1 style="text-align: center; color: #3e4b58">
                                欢迎登陆
                            </h1>
                            <select v-model="select" class="select">
                                <option value="1">管理员</option>
                                <option value="2">出租方</option>
                            </select>
                            <el-divider></el-divider>
                            <!-- form表单 -->
                            <el-form
                                :model="nameValidateForm"
                                ref="nameValidateForm"
                                label-width="100px"
                                class="demo-ruleForm"
                            >
                                <!-- 用户名 -->
                                <el-form-item
                                    label="用户名"
                                    prop="account"
                                    :rules="[
                                        {
                                            required: true,
                                            message: '用户名不能为空',
                                        },
                                        {
                                            min: 3,
                                            max: 10,
                                            message: '请输入3~10位的用户名',
                                            trigger: 'blur',
                                        },
                                    ]"
                                >
                                    <el-input
                                        placeholder="请输入用户名"
                                        type="text"
                                        v-model="nameValidateForm.account"
                                        autocomplete="off"
                                    ></el-input>
                                </el-form-item>

                                <!-- 密码 -->
                                <el-form-item
                                    label="密码"
                                    prop="password"
                                    :rules="[
                                        {
                                            required: true,
                                            message: '密码不能为空',
                                        },
                                        {
                                            min: 3,
                                            max: 16,
                                            message: '请输入3~16位的密码',
                                            trigger: 'blur',
                                        },
                                    ]"
                                >
                                    <el-input
                                        placeholder="请输入密码"
                                        v-model="nameValidateForm.password"
                                        show-password
                                    ></el-input>
                                </el-form-item>
                                <!-- 按钮 -->
                                <el-form-item>
                                    <el-button
                                        type="primary"
                                        @click="allLogin"
                                        :loading="logining"
                                        class="loginBtn"
                                        >登录</el-button
                                    >
                                    <el-button
                                        @click="$router.push('/register')"
                                        class="button-a"
                                        >没有账号？请注册</el-button
                                    >
                                </el-form-item>
                            </el-form>
                        </el-card>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import Vue from "vue";
import apis from "../../http/apis/apis";
import axios from '../../http/axios.js'
export default {
    data() {
        return {
            // 管理员登录
            nameValidateForm: {
                account: "",
                password: "",
            },
            checked: false,
            select: "1",
            logining: false,
        };
    },
    methods: {
        // 登录
        async allLogin() {
            if (this.select == 1) {
                // 管理员登录
                const { data } = await apis.admins.loginBtn({
                    account: this.nameValidateForm.account,
                    password: this.nameValidateForm.password,
                });
                
                if (data.status) {
                    this.logining = true;
                    setTimeout(() => {
                        localStorage.setItem("token", data.token);
                        this.$router.push("/system");
                    }, 1000);
                    axios({
                    url:'/logs/createLogs',
                    method:'post',
                    data:{
                        name:this.nameValidateForm.account,
                        operation:'登录',
                        result:'成功'
                    }
                })
                }
               
            } else if (this.select == 2) {
                // 出租方登录
                const { data } = await apis.lessors.loginLessors({
                    account: this.nameValidateForm.account,
                    password: this.nameValidateForm.password,
                });
                axios({
                    url:'/logs/createLogs',
                    method:'post',
                    data:{
                        name:this.nameValidateForm.account,
                        operation:'登录',
                        result:'成功'
                    }
                    })
                if (data.status) {
                    this.logining = true;
                    setTimeout(() => {
                        localStorage.setItem("token", data.token);
                        this.$router.push("/Lessors");
                    }, 1000);
                }
            }
        },
    },
};
</script>

<style>
.el-radio-group {
    display: flex;
    margin: 20px;
    /* 边缘 */
    justify-content: center;
}
.el-card {
    border-radius: 30px;
    width: 380px;
    border: 1px solid rgb(13, 241, 24);
}
.grid-content {
    border-radius: 4px;
    min-height: 80px;
}
.el-row {
    margin-bottom: 20px;
}
.el-main {
    height: 92vh;
}
.el-form-item {
    width: 300px;
    margin-right: 30px;
}
.select {
    border: none;
    margin-left: -195px;
    outline: none;
    color: #606266;
}
.button-a {
    border: none;
}
.loginBtn {
    width: 90px;
    margin-left: -53px;
}
.font {
    font-size: 25px;
    padding-left: 140px;
}
</style>